<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Optionbox Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Optionbox</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
                <h3 class="doc-header">Tag:</h3>
                <pre><code>&lt;gs-optionbox&gt;
    &lt;gs-option&gt;...&lt;/gs-option&gt;
&lt;/gs-optionbox&gt;</code></pre>
                
                <h3 class="doc-header">Description:</h3>
                <div class="doc-section">
                    <p>A <code>&lt;gs-optionbox&gt;</code> control allows you to select an option from a list.</p>
                </div>
                
                <h1 class="doc-header">Examples:</h1>
                <div class="doc-section">
                    <div class="doc-example-description">
                        <span class="h3">Skeleton Example:</span>
                        <p>A basic <code>&lt;gs-optionbox&gt;</code> element with six options. Without attributes the optionbox will have the following behaviors when an option is clicked:</p>
                        <ol>
                            <li>Select the clicked option.</li>
                            <li>Make the clicked option yellow.</li>
                            <li>Put a dot in the icon of the option.</li>
                            <li>Deselect any other selected options in the same box.</li>
                        </ol>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="12">
                            <gs-optionbox>
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                                <gs-option>Option 4</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[column]</code>:</span>
                        <p>When you have a <code>gs-optionbox</code> inside a data element and you want to use it to display cell data you use the <code>column</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="14">
                            <gs-form src="gsdoc.tpeople" where="id=2413">
                                <template>
                                    <gs-optionbox column="first_name" id="control_example">
                                        <gs-option value="Lemon">Lemon</gs-option>
                                        <gs-option value="Pear">Pear</gs-option>
                                        <gs-option value="Mango">Mango</gs-option>
                                        <gs-option value="Grapes">Grapes</gs-option>
                                    </gs-optionbox>
                                </template>
                            </gs-form>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[clearable]</code>:</span>
                        <p>The <code>clearable</code> attribute allows you to clear a <code>gs-optionbox</code> by clicking the selected option.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="17">
                            <gs-optionbox value="1" clearable>
                                <label>With Clearable Attribute:</label>
                                <gs-option value="1">Option 1</gs-option>
                                <gs-option value="2">Option 2</gs-option>
                            </gs-optionbox>
                            <br />
                            <label>Without Clearable Attribute:</label>
                            <gs-optionbox value="1">
                                <gs-option value="1">Option 1</gs-option>
                                <gs-option value="2">Option 2</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[onchange=""]</code>:</span>
                        <p>To run javascript when the value changes, use the <code>[onchange=""]</code> attribute.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="12">
                            <gs-optionbox onchange="alert('value changed: ' + this.value)">
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                                <gs-option>Option 4</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[no-target]</code>:</span>
                        <p>The "no-target" attribute prevents the default styling of the options.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="12">
                            <gs-optionbox no-target>
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                                <gs-option>Option 4</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Horizontal optionbox:</span>
                        <p>To run make the optionbox horizontal, put the [inline] attribute on the gs-options.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="17">
                            <gs-optionbox>
                                <gs-option inline>Option 1</gs-option>
                                <gs-option inline>Option 2</gs-option>
                                <gs-option inline>Option 3</gs-option>
                                <gs-option inline>Option 4</gs-option>
                            </gs-optionbox>
                            <gs-optionbox no-target>
                                <gs-option inline>Option 1</gs-option>
                                <gs-option inline>Option 2</gs-option>
                                <gs-option inline>Option 3</gs-option>
                                <gs-option inline>Option 4</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[mini]</code>:</span>
                        <p>The "mini" attribute removes the border from the gs-optionbox.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="12">
                            <gs-optionbox mini>
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                                <gs-option>Option 4</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Option Attribute <code>[value=""]</code>:</span>
                        <p>When you get the value of a <code>&lt;gs-optionbox&gt;</code>, it will use the <code>[value=""]</code> attribute of the <code>&lt;gs-option&gt;</code> to return. If there is no <code>[value=""]</code> attribute on the <code>&lt;gs-option&gt;</code>, it will return the text of the <code>&lt;gs-option&gt;</code>.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="21">
                            <gs-button onclick="test('example-1');">
                                    Alert .value (hidden value)</gs-button>
                            <gs-optionbox id="example-1">
                                <gs-option value="option1">Option 1</gs-option>
                                <gs-option value="option2">Option 2</gs-option>
                                <gs-option value="option3">Option 3</gs-option>
                            </gs-optionbox>
                            
                            <gs-button onclick="test('example-2');">
                                    Alert .value (text value)</gs-button>
                            <gs-optionbox id="example-2">
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                            </gs-optionbox>
                        </template>
                        <template for="js" height="5">
                            function test(strID) {
                                alert(document.getElementById(strID).value);
                            }
                        </template>
                    </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Optionbox Attribute <code>[value=""]</code>:</span>
                        <p>To set the default value for the <code>&lt;gs-optionbox&gt;</code>, use the <code>[value=""]</code> attribute.
                    </div>
                    <gs-doc-example>
                        <template for="html" height="17">
                            <gs-optionbox>
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                            </gs-optionbox>
                            <br />
                            <gs-optionbox value="Option 1">
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                    <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                    
                    <ul>
                        <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                        <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                    </ul>
                </div>
                <gs-doc-example query-string="test1=true&test2=false">
                    <template for="html" height="35">
                        <gs-optionbox qs="test1">
                            <gs-option>true</gs-option>
                            <gs-option>false</gs-option>
                        </gs-optionbox>
                        <gs-optionbox qs="test2=value">
                            <gs-option>true</gs-option>
                            <gs-option>false</gs-option>
                        </gs-optionbox>
                        <gs-optionbox qs="test3=hidden">
                            <gs-option>true</gs-option>
                            <gs-option>false</gs-option>
                        </gs-optionbox>
                        <gs-optionbox qs="test4!=hidden">
                            <gs-option>true</gs-option>
                            <gs-option>false</gs-option>
                        </gs-optionbox>
                        <br />
                        <br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test1=false');">Add "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test2=true');">Add "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test3=yes');">Add "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test4=yes');">Add "test4"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                            </gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                    
                    <div class="doc-example-description">
                        <span class="h3">Attribute <code>[disabled]</code>:</span>
                        <p>With the <code>[disabled]</code> attribute, you can control whether or not you can use the control.</p>
                    </div>
                    <gs-doc-example>
                        <template for="html" height="17">
                            <gs-optionbox>
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                            </gs-optionbox>
                            <br />
                            <gs-optionbox disabled>
                                <gs-option>Option 1</gs-option>
                                <gs-option>Option 2</gs-option>
                                <gs-option>Option 3</gs-option>
                            </gs-optionbox>
                        </template>
                    </gs-doc-example>
                    
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[readonly]</code>:</span><br />
                    <p>The <code>[readonly]</code> attribute is similar to <code>[disabled]</code> because it prevents the value from changing. The differences are that readonly is styled differently and allows you to copy the current text from the control.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="15">
                        <gs-optionbox readonly>
                            <gs-option>Option 1</gs-option>
                            <gs-option>Option 2</gs-option>
                            <gs-option>Option 3</gs-option>
                        </gs-optionbox>
                    </template>
                </gs-doc-example>
                </div>
                <br />
                <br />
                <br />
                <br />
        </gs-container>
    </body>
</html>
